<template>
  <button
    class="button"
    :disabled="disabled"
    @click.prevent="$emit('click')"
    :style="buttonStyle"
  >
    <p class="label">
      <span class="label-position label-position--before">
        <slot name="before"></slot>
      </span>
      <span>
        {{ label }}
      </span>
      <span class="label-position label-position--after">
        <slot name="after"></slot>
      </span>
    </p>
  </button>
</template>

<script>
export default {
  name: "Button",
  props: {
    label: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    buttonStyle() {
      const { color } = this;
      return {
        color,
        borderColor: color
      };
    }
  }
};
</script>

<style lang="less">
@import "../assets/common.less";
@height: 40;
.button {
  height: @height / @fontsize * 1em;
  border-radius: @height / 2 / @fontsize * 1em;
  padding: 7 / @fontsize * 1em 50 / @fontsize * 1em;
  border: 2 / @fontsize * 1em solid transparent;
  background-color: transparent;
  text-transform: uppercase;
  outline: none;
  -webkit-appearance: none;
  font-size: 1em;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
  }

  .label {
    position: relative;
    margin: 0;

    .label-position {
      position: absolute;
      top: 0;

      &.label-position--before {
        left: -0.5em;
        transform: translateX(-100%);
      }

      &.label-position--after {
        right: -0.5em;
        transform: translateX(100%);
      }
    }
  }
}
</style>
